<template>
  <div id="app">
<!--百度地图sdk-->
    <baidu-map class="map" ak="A4bVsMUFTccroTNezMNApA7PZnY6leUI"></baidu-map>
<!-- 首页导航栏-->
    <div class="title">
      <div class="logo"></div>

    </div>
<!--首页背景-->
    <div class="top">
      <div class="section s-img s-img1">
        <div id="words" class="animated bounceInDown">
          <br/>
          <span style="opacity: 0.7;">wandering dream</span><br/>
        </div>
        <img src="../../assets/image/dream/主页面文字2.png" id="tImg" class="hidden"/>
      </div>
    </div>
    <!--上方介绍-->

    <intrList></intrList>
	<!-- 上方过度 -->
	<div class="topCross toptop">
		<div class="wings">
			Wings of Dreams
		</div>
	</div>
    <!-- 上方第二部分，今日义卖-->

  <topTwo></topTwo>
    <!-- 中间广告栏   -->
    <div class="items"></div>
    <!--排行榜 -->
    <div class="ranklist">
      <div class="rankLeft">
        <div class="rankLTitle"></div>
        <div class="listContent">
          <el-table :data="student.slice((page-1)*pagesize,page*pagesize)" stripe style="width: 100%"
                    class="eTable" max-height="420" @row-click="handdles">
            <el-table-column prop="receivingAddress" label="地区" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="140">
            </el-table-column>
            <el-table-column prop="learningSection" label="年级">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <el-button type="warning" plain size="small">详情</el-button>

            </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="student.length*2" class='page'
                         @current-change='el_change'>
          </el-pagination>
        </div>
      </div>
      <div class="rankRight">
        <div class="rankRTitle"></div>
        <div class="listContent listR">
          <el-input placeholder="请输入要搜索的姓名" prefix-icon="el-icon-search" class="inputs" v-model="el_search">
          </el-input>
          <el-button type="primary" icon="el-icon-search" :loading="false" style="margin-left: 5px;"
                     @click="search">搜索
          </el-button>
          <el-table :data="donation" style="width: 95%;" header-align="center" max-height="320"
                    id="searchTab1">
            <el-table-column prop="nickName" style="text-align: center;" align="center" label="捐赠者">
            </el-table-column>
            <el-table-column label="捐赠金额" prop="donationMoney" align="center" sortable>
            </el-table-column>
          </el-table>
          <div class="search_cover">
            <el-table :data="serachStuent" style="width: 95%;" header-align="center" max-height="320"
                      id="searchTab1">
              <el-table-column prop="nickName" style="text-align: center;" align="center" label="捐赠者">
              </el-table-column>
              <el-table-column label="捐赠金额" prop="donationMoney" align="center" sortable>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="160">
                <el-button type="warning" plain size="small" @click="search_back">返回</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!--排行榜结束-->

  <!--项目列表 -->
    <dreamList></dreamList>
    <!-- list结束 -->
    <!-- 捐赠方式开始 -->
    <div class="ways">
      <div class="w_title">
				<span style="font-size: 28px;line-height: 60px;font-weight: bold;color: white;">
					捐赠方式
				</span>
      </div>
      <div class="ways_content">
        <div class="w_Left">
          <div class="wsjz">
            <img :src="wsjzSrc" @mouseover="wsjzOver" @mouseout="wsjzOut"/>
          </div>
          <div class="xcjz">
            <img :src="xcjzSrc" @mouseover="xcjzOver" @mouseout="xcjzOut"/>
          </div>
        </div>
        <div class="w_Right">
          <div id="allmap" class="hidden"></div>

          <div class="code">
            <img src="../../assets/image/home/code.png"/>

            <div class="xcjz_info">
							<span id="">
								机构地址：<br/>
								云南省昆明市盘龙区环城东路50号 </span><br/><br/>
              <span id="">
								捐赠热线：<br/>
								134334341222(毕先生) 152372737282(代老板)
								<br/><br/>
								谨慎扫码，支付后暂不支持退款
							</span>
              <button type="button" @click="payto">我要捐款</button>
            </div>
          </div>
        </div>
      </div>
    </div>
	
  </div>
</template>

<script>
  import $ from "jquery";
  import BaiduMap from "vue-baidu-map";
  import topTwo from "./child/topTwo";
  import intrList from "./child/intrList";
  import dreamList from "./child/dreamList";
  import {
    find,
    findStudent,
    donation,
    getnickname,
    getPic,
    findType
  } from "network/home.js";
  export default {
    name: "name",
    data() {
      return {
        //product: [],
        student: [],
        donation: [],
        nickname: "",
        centerDialogVisible: false,
        serachStuent: [],
        el_search: "",
        avatarSrc: "",
        page: 1,
        pagesize: 5,
        show: false,
        xcjzSrc: "../../assets/image/home/xcjk.png",
        wsjzSrc: "../../assets/image/home/wsjk_active.png",

      };
    },
    components: {
      topTwo,
      intrList,
      dreamList
    },
    methods: {
      handleScroll() {
        var scrollTops =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        // console.log(scrollTop);

        if (scrollTops >100) {
          $("#tImg").removeClass('hidden');
          $("#tImg").addClass('show');
          $("#tImg").addClass('topImg');
          $("#tImg").addClass('animated bounceInDown');
        }
		if (scrollTops >500) {
		  $(".introduction").addClass('animated bounceInLeft');
		}
		if (scrollTops >700) {
		 $(".midIntr .intr1").addClass('animated bounceInLeft');
		  $(".midIntr .intr2").addClass('animated bounceInDown');
		}
		if (scrollTops >750) {
			 $(".midIntr .intr3").addClass('animated bounceInUp');
			 $(".midIntr .intr4").addClass('animated bounceInRight');
			}
			if (scrollTops >1100) {
				 $(".wings").addClass('animated lightSpeedIn');

				}
        if (scrollTops > 2600) {
          setTimeout(function () {
            $(".photos").addClass('animated fadeInDownBig show');
          }, 100);

        }
        if (scrollTops > 3100) {
            $(".bottom_left").addClass('animated bounceInLeft');
			$(".b_box1").addClass('animated bounceInDown');
			$(".b_box2").addClass('animated bounceInDown');
			$(".b_box3").addClass('animated bounceInUp');
			 $(".b_box4").addClass('animated bounceInUp');
        }
	
		
		
      },
	 
      baiduMap() {
        this.map = new BMap.Map("allmap"); // 创建地图实例

        let point = new BMap.Point(102.738592, 25.057562); // 创建点坐标
        this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        this.map.addControl(new BMap.NavigationControl());
        this.map.addControl(new BMap.ScaleControl());
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.MapTypeControl());
        //map.setMapStyle({ style: 'midnight' }) //地图风格

        let pointList = [{
          name: "流浪平台捐赠地点",
          id: 1,
          info: "联系电话：15198325576",
          lat: "102.738592",
          lot: "25.057562",
        }

        ];

        for (let i = 0; i < pointList.length; i++) {
          let point = new BMap.Point(pointList[i].lat, pointList[i].lot);
          let marker = new window.BMap.Marker(point); // 创建标注
          this.map.addOverlay(marker); // 将标注添加到地图中

          //提示信息  可以解析 HTML标签以及CSS
          let infoWindow = new BMap.InfoWindow(`<p style='text-align:left;font-weight:800'>${pointList[i].name}</p>
	        　　　　　　<p style='text-align:left;font-weight:0'>${pointList[i].info}</p>`);
          // 鼠标移上标注点要发生的事
          marker.addEventListener("mouseover", function () {
            this.openInfoWindow(infoWindow);
          });

          // 鼠标移开标注点要发生的事
          marker.addEventListener("mouseout", function () {
            this.closeInfoWindow(infoWindow);
          });
          // 鼠标点击标注点要发生的事情
          marker.addEventListener("click", function () {
            alert("此处是捐赠地点");
          });
        }


      },
      xcjzOver() {
        this.wsjzSrc = '../../assets/image/home/wsjk.png'
        this.xcjzSrc = '../../assets/image/home/xcjk_active.png'
        $("#allmap").addClass('show');
        $("#allmap").removeClass('hidden');
        $(".code").addClass('hidden');
        this.baiduMap();
      },
      xcjzOut() {


      },
      payto() {
        this.$router.push('/charity/persondonation')
      },
      wsjzOver() {
        this.xcjzSrc = '../../assets/image/home/xcjk.png';
        this.wsjzSrc = '../../assets/image/home/wsjk_active.png';
        $("#allmap").removeClass('show');
        $("#allmap").addClass('hidden');
        $(".code").addClass('show');
        $(".code").removeClass('hidden');
      },
      wsjzOut() {

      },
      findProduct() {
        find().then(res => {
          console.log(res);
          this.product = res.payload;
          console.log(this.product[0])
        }).catch(error => {
          console.log(error);
        });
      },
      findStudents() {
        findStudent().then(res => {
          console.log(res);
          this.student = res[0, 1, 2, 3, 4];
        }).catch(error => {
          console.log(error);
        });
      },
      toLogin() {
        this.$router.push('/login/home')
      },
      donations() {
        donation().then(res => {
          console.log(res);
          this.donation = res.page.list;
        }).catch(error => {
          console.log(error);
        });
      },
      hover() {
        $(".el_img").mouseenter(function () {
          $(".cover").css({
            bottom: 0
          })
        });
        $(".Carousel").mouseleave(function () {
          $(".cover").css({
            bottom: -140
          })
        });
      },
      search() {
        const a = this.el_search;
        let b = this.serachStuent
        $.ajax({
          type: 'GET',
          url: 'msglen/donation/donationthings/getByNickName/' + a,
          dataType: 'json',
          async: false,
          success: function (result) {
            console.log(result);
            b = result;
            $("#searchTab1").css({
              'display': 'none'
            });
            $('.search_cover').css({
              'display': 'block'
            });
          }
        });
        console.log(b);
        this.serachStuent = b;

      },
      search_back() {
        $("#searchTab1").css({
          'display': 'block'
        });
        $('.search_cover').css({
          'display': 'none'
        });
      },


      showHello() {
        this.show = !this.show;
      },
      quitLogin() {
        this.$store.state.isLogin == false;
        sessionStorage.setItem("userToken", "");
        location.reload();
      },
      scrolls() {
         var a=$('.jz').height();
         let b=0.1;
          var timer = setInterval(function(){
            b+=0.1;
            //$('.jz').scrollTop(b*a);
				$('.jz li').css('top',-150*b);
            if(b==0.7){
              b=0.1;
              //$('.jz').scrollTop(1);
              clearInterval(this.timer)
            }
           }, 1500)
		
      },
      baiduMap() {
        this.map = new BMap.Map("allmap"); // 创建地图实例

        let point = new BMap.Point(102.738592, 25.057562); // 创建点坐标
        this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        this.map.addControl(new BMap.NavigationControl());
        this.map.addControl(new BMap.ScaleControl());
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.MapTypeControl()); //map.setMapStyle({ style: 'midnight' }) //地图风格
        let pointList = [{
          name: "流浪平台捐赠地点",
          id: 1,
          info: "联系电话：15198325576",
          lat: "102.738592",
          lot: "25.057562"
        }];

        for (let i = 0; i < pointList.length; i++) {
          let point = new BMap.Point(pointList[i].lat, pointList[i].lot);
          let marker = new window.BMap.Marker(point); // 创建标注
          this.map.addOverlay(marker); // 将标注添加到地图中 //提示信息  可以解析 HTML标签以及CSS

          let infoWindow = new BMap.InfoWindow(`<p style='text-align:left;font-weight:800'>${pointList[i].name}</p>
	        　　　　　　<p style='text-align:left;font-weight:0'>${pointList[i].info}</p>`); // 鼠标移上标注点要发生的事
          marker.addEventListener("mouseover", function () {
            this.openInfoWindow(infoWindow);
          }); // 鼠标移开标注点要发生的事

          marker.addEventListener("mouseout", function () {
            this.closeInfoWindow(infoWindow);
          }); // 鼠标点击标注点要发生的事情
          marker.addEventListener("click", function () {
            alert("此处是捐赠地点");
          });
        }
      },
      xcjzOver() {
        this.wsjzSrc = "../../assets/image/home/wsjk.png";
        this.xcjzSrc = "../../assets/image/home/xcjk_active.png";
        $("#allmap").addClass("show");
        $("#allmap").removeClass("hidden");
        $(".code").addClass("hidden");
        this.baiduMap();
      },
      xcjzOut() {
      },

      wsjzOver() {
        this.xcjzSrc = "../../assets/image/home/xcjk.png";
        this.wsjzSrc = "../../assets/image/home/wsjk_active.png";
        $("#allmap").removeClass("show");
        $("#allmap").addClass("hidden");
        $(".code").addClass("show");
        $(".code").removeClass("hidden");
      },
      wsjzOut() {
      },
      findProduct() {
        find()
          .then(res => {
            console.log(res);
            this.product = res.payload;
            console.log(this.product[0]);
          })
          .catch(error => {
            console.log(error);
          });
      },
      findStudents() {
        findStudent()
          .then(res => {
            console.log(res);
            this.student = res;
          })
          .catch(error => {
            console.log(error);
          });
      },
      toLogin() {
        this.$router.push("/login/home");
      },
      donations() {
        donation()
          .then(res => {
            console.log(res);
            this.donation = res.page.list;
          })
          .catch(error => {
            console.log(error);
          });
      },
      hover() {
        $(".el_img").mouseenter(function () {
          $(".cover").css({
            bottom: 0
          });
        });
        $(".Carousel").mouseleave(function () {
          $(".cover").css({
            bottom: -140
          });
        });
      },
      search() {
        const a = this.el_search;
        let b = this.serachStuent;
        $.ajax({
          type: "GET",
          url: "msglen/donation/donationthings/getByNickName/" + a,
          dataType: "json",
          async: false,
          success: function (result) {
            console.log(result);
            b = result;
            $("#searchTab1").css({
              display: "none"
            });
            $(".search_cover").css({
              display: "block"
            });
          }
        });
        console.log(b);
        this.serachStuent = b;
      },
      search_back() {
        $("#searchTab1").css({
          display: "block"
        });
        $(".search_cover").css({
          display: "none"
        });

      },

      async nav() {

      },
      showHello() {
        this.show = !this.show;
      },
      /* quitLogin() {
         this.$store.state.isLogin == false;
         sessionStorage.setItem("userToken", "");
         location.reload();
       }, */
      el_change: function (page) {
        this.page = page;
      },
      more() {
        this.$router.push('/charity/charityMall')
      },

      handdles(row) {

        console.log(row);
        this.$router.push({
          path: '/charity/persondonation',
          query: {
            id: row.recipientId,
          }
        })
      },
      choosePay(index) {
        this.$router.push({
          path: '/detail?type=category&id=' + index.productId
        })
        // alert(index.productId);
      }
	
    },
    watch: {
      el_search() {
        this.el_search = this.el_search;
      },
      donation() {
        this.donation = this.donation;
      },
      serachStuent() {
        this.serachStuent = this.serachStuent;
      },
      search() {
      },
      avatarSrc() {
        this.avatarSrc = this.avatarSrc;
      }
    },
    computed: {},
    created() {
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll, true);
	  document.getElementById('jz').addEventListener('scroll', () => {
	  
	   }, true)
	    
      //this.findProduct();
      this.findStudents();
      this.donations();
      this.hover();
      this.nav();
      this.scrolls();

      /* 手风琴 */
      $(function () {
        $('.xinxi_solution_main ul li:eq(0)').addClass('b1');
        $('.xinxi_solution_main ul li:eq(1)').addClass('b2');
        $('.xinxi_solution_main ul li:eq(2)').addClass('b3');
        $('.xinxi_solution_main ul li:eq(3)').addClass('b4');
        $('.xinxi_solution_main ul li:eq(4)').addClass('b5');
        $('.xinxi_solution_main ul li:eq(5)').addClass('b6');
        $('.xinxi_solution_main ul li:gt(3)').hide();
        //当三级分类大于7个的是，成两排显示
        $('.xinxi_solution_main ul li').each(function () {
          var len = $(this).find('.right dl a').length;
          if (len > 6) {
            $(this).find('.right dl a').addClass('yichu');
          }
        });

        //解决方案效果
        $('.xinxi_solution_main ul li').each(function () {
          var left_h = $(this).find('.left_top').height();
          $(this).find('.left_top').css({
            'top': '50%',
            'margin-top': -left_h / 2
          });

          var dl_h = $(this).find('.right dl').height();
          $(this).find('.right dl').css({
            'margin-top': -dl_h / 2
          });
        });
        $('.xinxi_solution_main ul li').click(function () {
          $(this).addClass('on').siblings().removeClass('on');
        });
        $('.xinxi_solution_main_mobile ul li:first-child').addClass('on');

        $('.xinxi_solution_main_mobile ul li').click(function () {
          $(this).addClass('on').siblings().removeClass('on');
        });

        $(".solu-category .solu-description").each(function () {
          var maxwidth = 60;
          if ($(this).text().length > maxwidth) {
            $(this).text($(this).text().substring(0, maxwidth));
            $(this).html($(this).html() + '...');
          }
        });

      });
	 
    },
    destroyed() {
      //离开这个界面之后，删除滚动事件，不然容易除bug
      window.removeEventListener("scroll", this.handleScroll);
	  // document.getElementById('jz').addEventListener('scroll', () => {
	     
	  //  }, true)
    }
  };
</script>

<style scoped lang="scss">
  #app {
    width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  .ani {
    color: var(--color-high-text);
  }

  .show {
    display: block;
  }

  .hidden {
    display: none;
  }

  .section {
    width: 100vw;
    height: 100vh;
    color: #fff;
    text-align: center;
  }

  .s-img {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
  }

  .s-img1 {
    background-image: url(../../assets/image/home/bg.jpg);
  }

  #words {
    width: 40%;
    height: 60%;
    top: 15%;
    left: 5%;
    color: white;
    position: relative;
    background: transparent;
    font-size: 48px;
  }

  .topTwo {
    width: 80%;
    height: 450px;
    position: relative;
    margin: 0 auto;
  }

  .Carousel {
    width: 30%;
    height: 400px;
    position: relative;
    left: 50px;
    top: 20px;
    background-size: cover;
    float: left;
    border-radius: 5px;
    overflow: hidden;
  }

  .Carousel img {
    width: 100%;
    height: 100%;
  }

  .details {
    width: 60%;
    float: left;
    height: 400px;
    margin-left: 70px;
    margin-top: 20px;
  }

  .details_L {
    width: 55%;
    height: 100%;
    overflow: hidden;
    float: left;
  }

  .details_R {
    width: 45%;
    height: 100%;
    float: left;
  }

  .items {
    width: 90%;
    height: 150px;
    margin: 20px auto;
    /* border: 1px solid black;*/
    background-image: url("../../assets/image/home/love.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 2s;
  }
  .items:hover{
    cursor: pointer;
  }
  .item {
    margin-left: 40px;
    margin-top: 35px;
    float: left;
  }

  .items:hover {
    transform: scale(1.1);
  }

  .introduction {
    width: 100%;
    height: 500px;
    margin: 0 auto;
  }

  .rankLeft {
    width: 49%;
    height: 100%;
    float: left;
    background-color: white;
  }

  .rankLTitle {
    width: 100%;
    height: 80px;
    background-image: url(../../assets/image/home/studentName.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff3e3;
  }

  .rankRTitle {
    width: 100%;
    height: 80px;
    background-image: url(../../assets/image/home/loveBoll.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff3e3;
  }

  .rankRight {
    margin-left: 1%;
    width: 49%;
    height: 100%;
    float: left;
    background-color: white;
  }

  .intrTop {
    width: 100%;
    height: 450px;
    position: relative;
    top: 30px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  
  }

  .intrTL {
    position: absolute;
    width: 40%;
    height: 75%;
    top: 15%;
    left: 5%;
    border-radius: 10px;
    /* box-shadow:  3px 3px 5px #000; */
    box-shadow: 2px 3px 10px rgb(36, 35, 35);
    z-index: 2;
  }

  .intrTL:hover {
    box-shadow: 0px 0px 20px #fff inset;
  }

  .intrTR {
    position: relative;
    width: 50%;
    height: 100%;
    left: 48%;
    z-index: 1;
  }

  .intrWords {
  }

  .xian {
    background-image: url("../../assets/image/home/xian.png");
    background-repeat: no-repeat;
    width: 80%;
    height: 3px;
    margin-left: 30px;
  }

  .title {
    width: 100%;
    height: 90px;
    line-height: 90px;
    margin-left: 100px;
    margin-top: 30px;
    display: flex;
  }

  .ranklist {
    width: 85%;
    height: 500px;
    margin: 0 auto;
  }

  .logo {
    position: relative;
    left: 0;
    height: 100%;
    width: 700px;
    background: url(../../assets/image/home/ltlogo.png);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    position: relative;
  }

  #right_nav {
    position: absolute;
    right: 30px;
    height: 80px;
    width: 200px;
    font-size: 16px;
  }

  #right_nav ul li {
    list-style-type: none;
  }

  #right_nav ul li:hover {
    cursor: pointer;
    color: #00cccf;
  }

  #right_nav li {
    float: left;
  }

  #about {
    font-size: 32px;
    position: relative;
    top: 50px;
    width: 100%;
    height: 100%;
  }

  .topImg {
    position: relative;
    left: 35%;
	top: -8%;
  }

  .d_title {
    width: 80%;
    height: 30px;
    border-radius: 12px;
    border: 1px solid red;
    background-color: #c30000;
    margin-top: 15px;
    color: white;
    position: relative;
  }

  .d_title_p {
    text-align: center;
    margin-left: 40px;
    line-height: 15px;
    height: 15px;
    position: absolute;
    top: 6px;
  }

  .shop {
    width: 80%;
    height: 85%;
    position: relative;
    left: 8%;
    top: 2%;
    font-size: 18px;
  }

  .msg {
    width: 80%;
    height: 85%;
    border-radius: 15px;
    border: 2px solid rgb(253, 234, 203);
    box-shadow: 2px 2px 2px 2px rgb(254, 254, 252);
    position: relative;
    top: 5px;
  }

  ul li {
    text-decoration: none;
    list-style-type: none;
  }

  .shop li {
    float: left;
    width: 100%;
    position: relative;
	height: 50px;
  }

  .shop ul {
    width: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .time {
    position: absolute;
    right: 10px;
  }

  .msg_msg {
    width: 100%;
    height: 50%;
  }

  .msg ul {
    text-align: center;
    width: 100%;
    height: auto;
  }

  .msg li {
    text-align: center;
    margin-top: 15px;
  }

  .listContent {
    width: 100%;
    height: auto;
    position: relative;
  }

  .mainContent {
    width: 85%;
    height: 1000px;
    margin: 40px auto;
    text-align: center;
    position: relative;
    align-items: center;
  }

  .jz {
    width: 100%;
    height: 43%;
    background-color: #fff5db;
    position: absolute;
    bottom: 0;
    overflow: auto;
    font-size: 14px;
  }

  .jz_title {
    width: 100%;
    height: 7%;
    background-color: #ffe7bf;
    text-align: center;
  }

  .jz ul {
    background-color: transparent;
  }

  .jz li {
    margin-top: 0;
    padding-top: 5px;
  }

  .mainBox {
    width: 20%;
    height: 310px;
    margin-top: 5%;
    margin-left: 9%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 2px 3px 3px rgb(139, 138, 138);
    cursor: pointer;
    border-radius: 3px;
  }

  .mainBox:hover {
    box-shadow: 2px 3px 10px rgb(36, 35, 35);
    transform: translate(0, -5px);
    transition-delay: 0s !important;
  }

  .tu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tu img {
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }

  .tu img:hover {
    transform: scale(1.2);
    filter: blur(1px);
  }

  .hv:hover {
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: rotateX(30deg);
  }

  .mainBox span {
    position: relative;
    top: 40%;
    font-size: 24px;
  }

  .boxs {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    top: 80%;
    left: 0;
    z-index: 2;
    opacity: 1;
    transition: all 0.8s;
    background-color: rgba(191, 191, 191, 0.7);
    /* background-color: transparent; */
    font-size: 24px;
  }

  .boxs:hover {
    top: 40%;
  }

  .inputs {
    width: 50%;
    margin-left: 15%;
  }

  .tableRowClass {
    text-align: center;
  }

  .img1 {
    background-image: url(../../assets/image/home/img1.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .img2 {
    background-image: url(../../assets/image/home/img2.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .img3 {
    background-image: url(../../assets/image/home/img3.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .img4 {
    background-image: url(../../assets/image/home/img4.jpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .ways {
    width: 85%;
    height: 400px;
    margin: 0 auto;
  }

  .w_title {
    width: 100%;
    height: 60px;
    background-color: orange;
    text-align: center;
  }

  .ways_content {
    width: 100%;
    margin-top: 20px;
    height: auto;
  }

  .w_Left {
    width: 320px;
    height: 250px;
    float: left;
    margin-left: 100px;
    margin-top: 30px;
  }

  .w_Right {
    width: 600px;
    height: 250px;
    float: left;
    margin-left: 20px;
    margin-top: 30px;
  }

  .xcjz img {
    margin-top: 20px;
    margin-left: 7px;
    cursor: pointer;
  }

  .wsjz img {
    margin-left: 7px;
    margin-top: 50px;
    cursor: pointer;
  }

  #allmap {
    width: 100%;
    height: 100%;
  }

  .code {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .code img {
    width: 150px;
    height: 150px;
    margin-top: 50px;
    margin-left: 90px;
    float: left;
  }

  .photos {
    width: 100%;
    height: 30%;
    position: relative;
  }

  .photos > img {
    width: 210px;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
    position: relative;
    transition: all 0.5s;
  }

  .photos .img1 {
    top: 40px;
    left: 125px;
    transform: rotate(5deg);
  }

  .photos .img2 {
    top: 40px;
    right: 100px;
    transform: rotate(-15deg);
  }

  .photos .img3 {
    top: 100px;
    right: 290px;
    transform: rotate(10deg);
  }

  .photos .img4 {
    top: 150px;
    left: 200px;
    transform: rotate(-10deg);
  }

  .photos > img:hover {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.2); //放大
    z-index: 666; //调整堆叠顺序，取值为0-999，
  }

  .boxs_content {
    font-size: 18px;
    text-align: left;
  }

  #ym li {
    line-height: 20px;
    width: 100%;
    height: 70px;
    border-bottom: 2px solid #c3c3c3;
    cursor: pointer;
    overflow: hidden;
  }

  #ym {
    overflow-y: scroll;
  }

  #ym .left {
    position: absolute;
    left: 0px;
    width: 25%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center center;

  }

  #ym .left img {
    width: 70%;
    margin-top: 10px;
    height: 70%;
  }


  #ym .right {
    font-size: 12px;
    position: absolute;
    left: 25%;
    bottom: 0px;
    width: 70%;
    height: 100%;

  }

  #ym .right_title {

    width: 100%;
    height: 25%;
    color: #007AFF;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  #ym .right .content {
    width: 100%;
    height: 74%;
    overflow: hidden;
    text-align: left;
    font-size: 13px;
    overflow: hidden;
    margin-top: 10px;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  //IE 10+
  .element {
    -ms-overflow-style: none;
  }

  //Firefox
  .element {
    overflow: -moz-scrollbars-none;
  }

  .xcjz_info {
    width: 50%;
    height: 60%;
    float: left;
    margin-left: 10%;
    margin-top: 5%;
  }

  .xcjz_info span {
    font-size: 18px;
  }

  #ym_r_title {
    width: 100%;
    height: 20%;
    position: relative;
    font-size: 12px;
  }

  .code button {
    width: 100px;
    height: 30px;
    margin-left: 10px;
    margin-top: 20px;
    color: red;
    border-radius: 5px;
    border: 2px solid red;
    cursor: pointer;
  }

  el-carousel-item img {
    z-index: 1;
  }

  .cover {
    width: 100%;
    height: 140px;
    background-color: rgba(181, 197, 198, 0.6);
    z-index: 222;
    position: absolute;
    bottom: -140px;
    transition: all 0.8s;
    color: black;
    cursor: pointer;

  }

  .c_title {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
  }

  .c_content {
    line-height: 20px;
    font-size: 15px;
    margin-top: 15px;
  }

  .search_cover {
    display: none;
  }

  #avatar {
    width: 35px;
    height: 35px;
    align-items: center;
    border: 1px solid black;
    overflow: hidden;
    margin-top: 25px;
    margin-left: 20px;
    border-radius: 50%;
    display: none;
  }

  #avatar img {
    position: relative;
    line-height: 25px;
  }

  .quit {
    position: absolute;
    right: 100px;
    top: 155px;
    font-size: 14px;
    background-color: transparent;
  }

  .quit #infos {
    width: 100%;
    height: 100%;
  }

  #infos li {
    margin-top: 2px;
  }

  #infos li:hover {
    cursor: pointer;
    color: blueviolet;
  }

  .eTable {
    height: 360px;
    position: relative;
  }

  .page {
    position: relative;
    margin-left: 30%;
    margin-top: 10px;
  }

  /* ...... */
  ul li {
    list-style-type: none;
  }

  a {
    text-decoration: none;
  }

  img {
    border: none;
  }

  em,
  i {
    font-style: normal;
  }

  .xinxi_solution_bg {
    background-size: 100% 400px;
    margin: 0 auto;
    background-color: transparent;
  }

  .xinxi_solution_main {
    margin-left: 14%;
    margin-top: 2%;
  }

  .xinxi_solution_main ul {
    overflow: hidden;
    height: 450px;
    margin: 0 auto;

  }

  .xinxi_solution_main .main_mobile {
    max-width: 1080px;
    min-width: 1080px;
  }

  .xinxi_solution_main ul li {
    height: 400px;
    float: left;
    width: 70px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    left: 40px;
    top: 10px;

  }

  .xinxi_solution_main ul li:hover {
    cursor: pointer;
  }

  .xinxi_solution_main ul li:nth-child(1) {
    background-image: url(https://img2.baidu.com/it/u=1745137495,2249798116&fm=26&fmt=auto&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .xinxi_solution_main ul li:nth-child(2) {
    background-image: url(https://img1.baidu.com/it/u=1594008622,1413911835&fm=26&fmt=auto&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .xinxi_solution_main ul li:nth-child(3) {
    background-image: url(https://img0.baidu.com/it/u=1775711949,4130122312&fm=26&fmt=auto&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .xinxi_solution_main ul li .left_top {
    position: absolute;
    left: 0;
    width: 30px;
    padding: 0 20px;
    text-align: center;
  }

  .xinxi_solution_main ul li .left_top img {
    width: 30px;
  }

  .xinxi_solution_main ul li i {
    font-size: 24px;
    color: #FFF;
  }

  .xinxi_solution_main .left_top {
    font-size: 30px;
    color: #FFF;
  }

  .xinxi_solution_main ul li .left {
    float: left;
    width: 70px;
    background: #000;
    opacity: 0.5;
    height: 400px;
  }

  .xinxi_solution_main ul li .right {
    float: left;
    width: 680px;
    position: relative;
    height: 400px;
    font-size: 18px;
  }


  .xinxi_solution_main ul li.on {
    width: 780px;
  }


  .right_content1 {
    margin-top: 15%;
    font-size: 24px;
    margin-left: 5%;
    color: black;
    line-height: 35px;
  }

  .right_content2 {
    margin-top: 10%;
    font-size: 24px;
    margin-left: 5%;
    color: black;
    line-height: 35px;
  }

  .right_content2 #aa {
    color: red;
    margin-left: 30%;
    text-decoration: underline;
  }

  .right_content2 #aa:hover {
    cursor: pointer;
  }

  .right_content4 {
    margin-top: 10%;
    font-size: 24px;
    margin-left: 25%;
    line-height: 35px;
    color: black;
  }

  #moremore:hover {
    cursor: pointer;
  }
   #boxx {
          width: 200px;
          height: 200px;
          border: solid 1px black;
          position: absolute;
          top: 0;
          left: 0;
          background: url("https://img0.baidu.com/it/u=2866335404,2344853624&fm=26&fmt=auto&gp=0.jpg") no-repeat;
        }
     #boxx img {
          width: 20px;
          height: 20px;
          float: right;
        }
		// 上方过度
		.topCross{
			width: 100%;
			height: 250px;
		}
		.toptop{
			background: url(../../assets/image/charity/d4.jpg);
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
		}
		.wings{
			width: 100%;
			height: 100%;
			font-size: 64px;
			text-align: center;
			line-height: 250px;
			color: white;
		}
</style>
